import React, { Component } from 'react';
import AttendanceRecord, { ClockInResult, ClockOutResult } from '../../../ImportData/parseAttendanceFileToModel/AttendanceRecord';
import Worker from '../../../ImportData/parseAttendanceFileToModel/Worker';
import './index.scss';

export interface RowInfo {
    worker: Worker;
    attendanceRecordList: AttendanceRecord[];
}

export interface Props extends RowInfo {
    officialHolidays: number;
};

export default class Row extends Component<Props> {

    render() {
        const { worker, attendanceRecordList } = this.props;
        let lateTenMinutesTime = 0;
        let lateMoreThanTenMinutesTime = 0;
        let notClockedDays = 0;
        let attendanceDay = 0;
        attendanceRecordList.forEach(record => {
            switch (record.clockInfo.clockInInfo.clockInResult) {
                case ClockInResult.NORMAL:
                    attendanceDay += 0.5;
                    break;
                case ClockInResult.BE_LATE:
                    attendanceDay += 0.5;
                    lateTenMinutesTime++;
                    break;
                case ClockInResult.TOO_LATE:
                    attendanceDay += 0.5;
                    lateMoreThanTenMinutesTime++;
                    break;
                case ClockInResult.ABSENTEEISM_LATE:
                    notClockedDays += 0.5;
                    break;

            }

            switch (record.clockInfo.clockOutInfo.clockOutResult) {
                case ClockOutResult.NORMAL:
                    attendanceDay += 0.5;
                    break;
                case ClockOutResult.EARLY:
                    attendanceDay += 0.5;
                    break;
                case ClockOutResult.ABSENTEEISM_EARLY:
                    notClockedDays += 0.5;
                    break;
            }
        });
        let beyondTheHolidays = notClockedDays - this.props.officialHolidays;
        if (beyondTheHolidays < 0) {
            beyondTheHolidays = 0;
        }
        return (
            <div className="row">
                <div className="info-row">
                    <div className="worker-info">
                        <span className="info-item id">工号：{worker.id}</span>
                        <span className="info-item name">姓名：{worker.name}</span>
                        <span className="info-item info-department">部门：{worker.department.name}</span>
                    </div>
                    <div className="statistical-info">
                        <span className="info-item">迟到10分钟以内：{lateTenMinutesTime} 次</span>
                        <span className="info-item">迟到10分钟以上：{lateMoreThanTenMinutesTime} 次</span>
                        <span className="info-item">公休日：{this.props.officialHolidays} 天</span>
                        <span className="info-item">出勤：{attendanceDay} 天</span>
                        <span className="info-item">实际休假：{notClockedDays} 天</span>
                        <span className="info-item">超假：{beyondTheHolidays} 天</span>
                    </div>
                </div>
                <div className="record-row">
                    {
                        this.props.attendanceRecordList.map(record => {
                            const { clockMomentList, clockInfo } = record;
                            const { clockInInfo, clockOutInfo } = clockInfo;
                            const { clockInResult } = clockInInfo;
                            const { clockOutResult } = clockOutInfo;
                            let clockInClassName = 'clock';
                            let clockOutClassName = 'clock';
                            let full = 1;
                            
                            switch (clockInResult) {
                                case ClockInResult.BE_LATE:
                                    clockInClassName += ' be-late';
                                    break;
                                case ClockInResult.TOO_LATE:
                                    clockInClassName += ' too-late';
                                    break;
                                case ClockInResult.ABSENTEEISM_LATE:
                                    clockInClassName += ' absenteeism-late';
                                    full -= 0.5;
                                    break;

                            }

                            switch (clockOutResult) {
                                case ClockOutResult.ABSENTEEISM_EARLY:
                                    clockOutClassName += ' absenteeism-early'
                                    full -= 0.5;
                                    break;
                            }

                            let clockInMomentStr: string = '-0.5';
                            let clockOutMomentStr: string = '-0.5';
                            let notClock: string = '-1';
                            if (clockMomentList.length === 1) {
                                const firstClockMomentStr = clockMomentList[0].format('HH:mm');
                                if (clockInResult === ClockInResult.ABSENTEEISM_LATE && clockOutResult !== ClockOutResult.ABSENTEEISM_EARLY) {
                                    clockOutMomentStr = firstClockMomentStr;
                                } else if (clockInResult !== ClockInResult.ABSENTEEISM_LATE && clockOutResult === ClockOutResult.ABSENTEEISM_EARLY) {
                                    clockInMomentStr = firstClockMomentStr;
                                } else {
                                    notClock = firstClockMomentStr;
                                }
                            } else if (clockMomentList.length >= 2) {
                                clockInMomentStr = clockMomentList[0].format('HH:mm');
                                clockOutMomentStr = clockMomentList[clockMomentList.length - 1].format('HH:mm');
                            }

                            return (
                                <div
                                    className="record"
                                    key={record.id}
                                >
                                    {
                                        full > 0 || clockMomentList.length > 0 ?
                                            (
                                                <>
                                                    <div className={clockInClassName}>{clockInMomentStr}</div>
                                                    <div className={clockOutClassName}>{clockOutMomentStr}</div>
                                                </>
                                            ) :
                                            (
                                                <div className="not-clock">{notClock}</div>
                                            )
                                    }
                                </div>
                            );
                        })
                    }
                </div>
            </div>
        )
    }
}
